<template>
<div v-show="disPlayFlag">
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>设置联系信息</span>
        </div>
        <el-form :rules="rules" ref="targetForm" :model="temp" label-width="130px" label-position='right' size="small">
            <el-row :gutter="5">
                <el-col :span="12">
                    <el-form-item label="用户称谓" prop="userinfoTitle" size='mini'>
                        <el-input v-model="temp.userinfoTitle"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="默认身份" prop="isDefault" :show-overflow-tooltip='true'>
                        <el-radio v-model="temp.isDefault" v-for="item in yesOrNoOptions" :key="item.key" :label="item.key">{{item.display_name}}</el-radio>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="5">
                <el-col :span="12">
                    <el-form-item label="员工编号" prop="employerId" size='mini'>
                        <el-input v-model="temp.employerId"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="入职日期" prop="employedDate" :show-overflow-tooltip='true'>
                        <el-date-picker type="date" format="yyyy-MM-dd" value-format="yyyyMMddHHmmss" placeholder="入职日期" v-model="temp.employedDate" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="5">
                <el-col :span="12">
                    <el-form-item label="性别" prop="gender" :show-overflow-tooltip='true'>
                        <el-radio v-model="temp.gender" v-for="item in sexOptions" :key="item.key" :label="item.key">{{item.display_name}}</el-radio>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="出生日期" prop="birthday" :show-overflow-tooltip='true'>
                        <el-date-picker type="date" format="yyyy-MM-dd" value-format="yyyyMMddHHmmss" placeholder="出生日期" v-model="temp.birthday" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="5">
                <el-col :span="12">
                    <el-form-item label="身份证号" prop="cardId" size='mini'>
                        <el-input v-model="temp.cardId"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="参加工作日期" prop="workDate" :show-overflow-tooltip='true'>
                        <el-date-picker type="date" format="yyyy-MM-dd" value-format="yyyyMMddHHmmss" placeholder="参加工作日期" v-model="temp.workDate" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="5">
                <el-form-item label="开户银行所在地" prop="bankLocation" size='mini'>
                    <el-cascader :options="locationOptions" v-model="temp.bankLocation" expand-trigger="hover">
                    </el-cascader>
                </el-form-item>
            </el-row>
            <el-row :gutter="5">
                <el-col :span="12">
                    <el-form-item label="开户银行" prop="bankId" size='mini'>
                        <el-select clearable v-model="temp.bankId">
                            <el-option v-for="item in bankOptions" :key="item.key" :label="item.display_name" :value="item.key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="开户银行账户" prop="bankAccount" size='mini'>
                        <el-input v-model="temp.bankAccount"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="5">
                <el-form-item label="备注信息" prop="memos" size='mini'>
                    <el-input v-model="temp.memos" type="textarea" :rows="4"></el-input>
                </el-form-item>
            </el-row>
        </el-form>
    </el-card>
    <el-card class="box-card">
        <el-button size="small" class="filter-item" type="primary" @click="saveData">保 存</el-button>
    </el-card>
</div>
</template>

<script>
import {
  compositeSelect,
  updateItem
} from '@/api/systemManage/tabPaneOtherInfo'
import {
  roleOptions,
  clickTypeOptions,
  statusOptions,
  organizationCategoryOptions,
  yesOrNoOptions,
  menuTypeOptions,
  logFlagOptions,
  jobtitleOptions,
  joblevelOptions,
  bankOptions,
  relationTypeOptions,
  managerTypeOptions,
  groupTypeOptions,
  sexOptions
} from '@/utils/allOptions'
import {
  provinceAndCityData
} from 'element-china-area-data'
export default {
  props: {
    disPlayFlag: {
      type: Boolean,
      default: false
    },
    targetUserId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // -------Options-----------
      roleOptions,
      clickTypeOptions,
      statusOptions,
      organizationCategoryOptions,
      yesOrNoOptions,
      menuTypeOptions,
      logFlagOptions,
      jobtitleOptions,
      joblevelOptions,
      bankOptions,
      relationTypeOptions,
      managerTypeOptions,
      groupTypeOptions,
      sexOptions,
      // -------Options-----------
      locationOptions: provinceAndCityData,
      rules: {
        userinfoTitle: [{
          min: 0,
          max: 255,
          message: '长度在 0 到 255 个字符',
          trigger: 'blur'
        },
        {
          max: 255,
          message: '最大 255 个字符',
          trigger: 'blur'
        }
        ],
        employerId: [{
          min: 0,
          max: 36,
          message: '长度在 0 到 36 个字符',
          trigger: 'blur'
        },
        {
          max: 36,
          message: '最大 36 个字符',
          trigger: 'blur'
        }
        ],
        bankAccount: [{
          min: 0,
          max: 50,
          message: '长度在 0 到 50 个字符',
          trigger: 'blur'
        },
        {
          max: 50,
          message: '最大 50 个字符',
          trigger: 'blur'
        }
        ],
        memos: [{
          min: 0,
          max: 255,
          message: '长度在 0 到 255 个字符',
          trigger: 'blur'
        },
        {
          max: 255,
          message: '最大 255 个字符',
          trigger: 'blur'
        }
        ]
      },
      temp: {
        'userinfoTitle': '',
        'isDefault': '',
        'employerId': '',
        'employedDate': '',
        'gender': '',
        'birthday': '',
        'cardId': '',
        'workDate': '',
        'bankProvince': '',
        'bankCity': '',
        'bankId': '',
        'bankAccount': '',
        'memos': '',
        'bankLocation': ['', '']
      }
    }
  },
  filters: {},
  mounted() {
    if (this.disPlayFlag) {
      this.editForm()
    }
  },
  created() {},
  watch: {
    disPlayFlag: {
      handler: function(val, oldVal) {
        if (this.disPlayFlag) {
          this.editForm()
        } else {
          this.resetAll()
        }
      },
      immediate: true
    }
  },
  methods: {
    editForm() {
      console.log(this.targetUserId)
      const searchCon = {
        condition: {
          id: {
            property: 'id',
            value: this.targetUserId,
            type: 'EQ'
          }
        },
        fields: [
          'userinfoTitle',
          'isDefault',
          'employerId',
          'employedDate',
          'gender',
          'birthday',
          'cardId',
          'workDate',
          'bankProvince',
          'bankCity',
          'bankId',
          'bankAccount',
          'memos'
        ]
      }
      compositeSelect(searchCon).then(response => {
        if (response.data.data.count > 0) {
          const resData = response.data.data.records[0]
          this.temp = Object.assign({}, resData) // copy obj   this.subSystemsOptions.push(input);
          this.temp.bankLocation = [resData.bankProvince, resData.bankCity]
        }
      })
    },
    resetAll() {
      this.temp = {
        'userinfoTitle': '',
        'isDefault': '',
        'employerId': '',
        'employedDate': '',
        'gender': '',
        'birthday': '',
        'cardId': '',
        'workDate': '',
        'bankProvince': '',
        'bankCity': '',
        'bankId': '',
        'bankAccount': '',
        'memos': '',
        'bankLocation': ['', '']
      }
      if (this.$refs.targetForm) {
        this.$refs.targetForm.clearValidate()
      }
    },
    saveData() {
      this.$refs.targetForm.validate(valid => {
        if (valid) {
          const insertData = {
            'userinfoTitle': this.temp.userinfoTitle,
            'isDefault': this.temp.isDefault,
            'employerId': this.temp.employerId,
            'employedDate': this.temp.employedDate,
            'gender': this.temp.gender,
            'birthday': this.temp.birthday,
            'cardId': this.temp.cardId,
            'workDate': this.temp.workDate,
            'bankProvince': '',
            'bankCity': '',
            'bankId': this.temp.bankId,
            'bankAccount': this.temp.bankAccount,
            'memos': this.temp.memos
          }
          if (this.temp.bankLocation) {
            insertData.bankProvince = this.temp.bankLocation[0]
            insertData.bankCity = this.temp.bankLocation[1]
          }
          updateItem(this.targetUserId, insertData).then(() => {
            this.resetAll()
            this.editForm()
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    }
  }
}
</script>
